<template>
  <div class="container">
    <div class="top_title">
      欢迎登录后台管理系统
    </div>
   <div class="top_content">

      <div class="top_item">
        <div class="">
          <div class="jc"></div>
          <div class="label mt10"  style="font-weight: bolder">日活跃用户 {{todayLogins}}</div>
        </div>
        <div class="image">
          <img src="@/assets/images/u1.png">
        </div>
      </div>
      <div class="top_item">
        <div class="">
          <div class="jc"></div>
          <div class="label mt10" style="font-weight: bolder">月活跃用户 {{totalLogins}}</div>
        </div>
        <div class="image">
          <img src="@/assets/images/u2.png">
        </div>
      </div>
<!--      <div class="top_item">-->
<!--        <div class="">-->
<!--          <div class="jc">%</div>-->
<!--          <div class="label mt10">本月满意度</div>-->
<!--          <div class="label mt5">-->
<!--            昨日<span class="label c_red  ml5">新增 %</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="image">-->
<!--          <img src="@/assets/images/u3.png">-->
<!--        </div>-->
<!--      </div>-->

    </div>



    <div class="bt_content">

    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'


const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}


import getters from '@/store/getters'
import { getTotalNum } from '../api/business/total'

export default {
  name: 'Index',
  components: {

  },
  created() {
    this.getTotalNum()
    // this.tjfxnum()
    // this.getZgfwBarData()
    // this.getXcxFwLineData()
    // this.getKnFwBarTypeData()
    // this.getKnFwLineTypeData()
    // this.getCardFwLineData()
    // this.getActiveBarData()
    // this.getNewReplyListdata()
    // this.getDbNum()
    // this.getTotalNum()
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      bfbarChartData: null,
      bftypebarChartData: null,
      activebarChartData: null,
      xczlineChartData: null,
      kmbflineChartData: null,
      cardlineChartData: null,
      datanum: {},
      // 版本号
      version: '3.8.7',
      zfwbarshow: false,
      bftypebarshow: false,
      activebarshow: false,
      xcxlineshow: false,
      knbflineshow: false,
      cardlineshow: false,
      replyList: [],
      totalLogins: 0,
      todayLogins:0

    }
  },
  computed: {


  },
  methods: {


    getTotalNum() {
      getTotalNum().then(response => {
           this.totalLogins=response.data.totalLogins,
           this.todayLogins=response.data.todayLogins
      })
    },

    tomenu(url) {
      // 跳转到帮扶申请
      this.$router.push({ path: url })
    },
    goTarget(href) {
      window.open(href, '_blank')
    },
    moreReply() {
      // 路由跳转
      this.$router.push({
        path: '/knbf/knbfsq'
      })
    }
  }
}
</script>

<style scoped lang="scss">

.number1 {
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
}

.c_red {
  color: #E51B10;
}

.label {
  font-size: 14px;
  text-align: left;
  font-weight: 370;
}

.jc {
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #333333;
}

.container {
  background-color: #F2F2F2;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;

  .top_title {
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 1);
    padding-left: 20px;
  }

  .db_content_wz {
    background-color: rgba(255, 255, 255, 1);

  }

  .db_content_item_db {
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;

    .db_item {
      flex: 1;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 10px;
      padding: 20px;
      font-size: 20px;
      // 显示小手
      cursor: pointer;

      .db_num {

      }
    }

    .db_item:nth-child(1),
    .db_item:nth-child(2),
    .db_item:nth-child(3),
    {
      margin-right: 20px;
    }


  }

  .top_content {
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;

    .top_item {
      flex: 1;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 10px;
      padding: 20px;
      font-size: 20px;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .image img {
        width: 130px;
        height: 130px;
      }
    }

    .top_item:nth-child(1),
    .top_item:nth-child(2),
    .top_item:nth-child(3),
    .top_item:nth-child(4) {
      margin-right: 20px;
    }
  }

}

.bt_content {
  display: flex;
  justify-content: space-between;

  .left-div,
  .right-div {
    background-color: rgba(255, 255, 255, 1);
  }

  .left-div {
    flex: 3;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    .char_div {
      flex-basis: calc(50% - 20px); /* 每个子元素占据50%，减去间距 */
      height: 400px;
      margin: 5px;
      //border: 1px  solid  red ;
      display: flex;
      align-items: center;
    }
  }

  .right-div {
    flex: 1;
    margin-left: 10px;
    padding: 20px 10px;

    .top_div {
      display: flex;
      justify-content: space-between;

      .fbder {
        font-weight: bolder;
      }

      .moreReply:hover {
        color: blue;
        // 变小手
        cursor: pointer;
      }
    }

    .xx_content {
      padding-bottom: 30px;
      max-height: 850px;
      overflow-y: auto;

      .xx_list {
        margin-top: 20px;
        border-bottom: 1px solid #E5E5E5;

      }

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0px;

        .el-image {
          vertical-align: bottom;
        }

      }

      .tcontent {
        max-width: 400px;
        //超出部分换行
        overflow-wrap: break-word;

        //max-height: 100px;
        //overflow-y: auto;

      }

      .time {
        margin: 10px 0px;
      }

    }
  }
}


</style>

